<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
    <script src="/plugs/echarts.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-card>
                    <span>
                        操作系统：{{ serverInfo.sys.os }}&nbsp;&nbsp;&nbsp;
                        Java版本：{{ serverInfo.sys.javaVersion }}&nbsp;&nbsp;&nbsp;
                        ip地址：{{ serverInfo.sys.ip }}&nbsp;&nbsp;&nbsp;
                        程序启动时间：{{ serverInfo.sys.runtime }}&nbsp;&nbsp;&nbsp;
                        程序启动时长：{{ serverInfo.sys.day }}&nbsp;&nbsp;&nbsp;
                    </span>
                </el-card>
            </div>
        </el-col>
    </el-row>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
        </div>
        <div>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
                <div class="title">CPU使用率</div>
                <el-tooltip placement="top-end">
                    <div slot="content" style="font-size: 12px;">
                        <div style="padding: 3px;">
                            {{ serverInfo.cpu.name }}
                        </div>
                        <div style="padding: 3px">
                            {{ serverInfo.cpu.package }}
                        </div>
                        <div style="padding: 3px">
                            {{ serverInfo.cpu.core }}
                        </div>
                        <div style="padding: 3px">
                            {{ serverInfo.cpu.logic }}
                        </div>
                    </div>
                    <div class="content">
                        <el-progress type="dashboard" :percentage="parseFloat(serverInfo.cpu.used)" :color="getStatus(serverInfo.cpu.used)"/>
                    </div>
                </el-tooltip>
                <div class="footer">{{ serverInfo.cpu.coreNumber }} 核心</div>
            </el-col>

            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
                <div class="title">内存使用率</div>
                <el-tooltip placement="top-end">
                    <div slot="content" style="font-size: 12px;">
                        <div style="padding: 3px;">
                            总量：{{ serverInfo.memory.total }}
                        </div>
                        <div style="padding: 3px">
                            已使用：{{ serverInfo.memory.used }}
                        </div>
                        <div style="padding: 3px">
                            空闲：{{ serverInfo.memory.available }}
                        </div>
                    </div>
                    <div class="content">
                        <el-progress type="dashboard" :percentage="parseFloat(serverInfo.memory.usageRate)" :color="getStatus(serverInfo.memory.usageRate)"/>
                    </div>
                </el-tooltip>
                <div class="footer">{{ serverInfo.memory.used }} / {{ serverInfo.memory.total }} </div>
            </el-col>

            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
                <div class="title">JVM堆内存</div>
                <el-tooltip placement="top-end">
                    <div slot="content" style="font-size: 12px;">
                        <div style="padding: 3px">
                            初始大小：{{ serverInfo.jvm.init }} (M)
                        </div>
                        <div style="padding: 3px">
                            最大可用：{{ serverInfo.jvm.max }} (M)
                        </div>
                        <div style="padding: 3px">
                            已使用：{{ serverInfo.jvm.used }} (M)
                        </div>
                        <div style="padding: 3px">
                            已申请：{{ serverInfo.jvm.committed }} (M)
                        </div>
                    </div>
                    <div class="content">
                        <el-progress type="dashboard" :percentage="parseFloat(serverInfo.jvm.usageRate)" :color="getStatus(serverInfo.jvm.usageRate)"/>
                    </div>
                </el-tooltip>
                <div class="footer">{{ serverInfo.jvm.used }} MiB / {{ serverInfo.jvm.committed }} MiB</div>
            </el-col>

            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
                <div class="title">磁盘使用率</div>
                <div class="content">
                    <el-tooltip placement="top-end">
                        <div slot="content" style="font-size: 12px;">
                            <div style="padding: 3px">
                                总量：{{ serverInfo.disk.total }}
                            </div>
                            <div style="padding: 3px">
                                已使用：{{ serverInfo.disk.used }}
                            </div>
                            <div style="padding: 3px">
                                空闲：{{ serverInfo.disk.available }}
                            </div>
                        </div>
                        <div class="content">
                            <el-progress type="dashboard" :percentage="parseFloat(serverInfo.disk.usageRate)" :color="getStatus(serverInfo.disk.usageRate)"/>
                        </div>
                    </el-tooltip>
                </div>
                <div class="footer">{{ serverInfo.disk.used }}  / {{ serverInfo.disk.total }} </div>
            </el-col>

        </div>
    </el-card>
</div>
<div style="margin-top: 10px; width: 100%; background-color: white;">
    <div style="background-color: white">
        <div>CPU使用率</div>
        <div id="cpuEcharts" style="width: 50%;height:400px; float: left;background-color: white"></div>
    </div>
    <div style="background-color: white">
        <div>内存使用率</div>
        <div id="memoryEcharts" style="width: 50%;height:400px; float: left;background-color: white"></div>
    </div>

</div>

</body>
<script>

    let vm = new Vue({
        el: "#app",
        data: {
            serverInfo: {
                sys: {
                    os: "",
                    day: "",
                    runtime: "",
                    ip: "",
                },
                cpu: {
                    name: "",
                    package: 0,
                    core: 0,
                    coreNumber: 0,
                    logic: 0,
                    used: 0,
                    idle: 0,
                },
                memory: {
                    total: 0,
                    available: 0,
                    used: 0,
                    usageRate: 0,
                },
                jvm: {
                    init: 0,
                    max: 0,
                    used: 0,
                    committed: 0,
                    usageRate: 0,
                },
                disk: {
                    total: 0,
                    available: 0,
                    used: 0,
                    usageRate: 0,
                },
            },
        },
        methods: {
            getStatus(usageRate) {
                if (usageRate > 80 )
                    return "#ff4949";
                if (usageRate > 70 )
                    return "#e6a23c";

                return "#13ce66";
            }
        }
    });


    var cpuOption = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:[],
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20
        },
        series: [{
            data: [],
            type: 'line',
            areaStyle: {
                normal: {
                    color: 'rgb(32, 160, 255)' // 改变区域颜色
                }
            },
            itemStyle: {
                normal: {
                    color: '#6fbae1',
                    lineStyle: {
                        color: '#6fbae1' // 改变折线颜色
                    }
                }
            }
        }]
    };
    var memoryOption = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:[],
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20
        },
        series: [{
            data: [],
            type: 'line',
            areaStyle: {
                normal: {
                    color: 'rgb(32, 160, 255)' // 改变区域颜色
                }
            },
            itemStyle: {
                normal: {
                    color: '#6fbae1',
                    lineStyle: {
                        color: '#6fbae1' // 改变折线颜色
                    }
                }
            }
        }]
    };

    var cpuChart = echarts.init(document.getElementById('cpuEcharts'));
    var memoryChart = echarts.init(document.getElementById('memoryEcharts'));
    // 使用刚指定的配置项和数据显示图表。
    cpuChart.setOption(cpuOption);
    memoryChart.setOption(memoryOption);

    function setEChartData(serverInfo) {
        memoryOption.xAxis.data.push(serverInfo.time);
        memoryOption.series[0].data.push(serverInfo.memory.usageRate);
        memoryChart.setOption(memoryOption);

        cpuOption.xAxis.data.push(serverInfo.time);
        cpuOption.series[0].data.push(serverInfo.cpu.used);
        cpuChart.setOption(cpuOption);
    }
</script>
<script>
    //websocket对象
    let websocket = null;


    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //动态获取域名或ip
        let hostname = window.location.hostname;
        let port = window.location.port;
        let socketUrl="ws://" + hostname +":" + port + "/webSocket/serverInfo";
        websocket = new WebSocket(socketUrl);
    } else {
        errorMessage("您的浏览器不支持WebSocket");
    }

    //连接发生错误的回调方法
    websocket.onerror = function (e) {
        errorMessage("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功")
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        let serverInfo;
        if (!event.data) {
            return;
        }

        serverInfo = JSON.parse(event.data);
        if (serverInfo.error) {
            errorMessage(serverInfo.error);
            return;
        }
        vm.serverInfo = serverInfo;
        setEChartData(serverInfo);
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭")
    };


</script>
<style>
    .red {
        color: red;
    }
    .box-card {
        margin-bottom: 5px;
    }
    span {
        margin-right: 28px;
    }
    .el-icon-refresh {
        margin-right: 10px;
        float: right;
        cursor:pointer;
    }

    .cpu, .memory, .swap, .disk  {
        width: 20%;
        float: left;
        padding-bottom: 20px;
        margin-right: 5%;
    }
    .title {
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        color: #999;
        margin-bottom: 16px;
    }
    .footer {
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        color: #999;
        margin-top: -5px;
        margin-bottom: 10px;
    }
    .content {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>
</html>
